<style lang="less">
    @import './own-space.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <div>
                <Form ref="userForm" :model="userForm" :label-width="100" label-position="right" onsubmit="return false">
                    <FormItem label="用户姓名：">
                        <span>{{ userForm.username }}</span>
                    </FormItem>
                    <FormItem label="公司名称：">
                        <span>{{ userForm.companyName }}</span><Button v-if="buttonSHow" type="text" @click="showEditCompany">修改公司名称</Button>
                    </FormItem>
                    <FormItem label="登录密码：">
                        <Button type="text" @click="showEditPassword">修改密码</Button>
                        <Button v-if="buttonSHow" type="text" @click="showEPassword">忘记密码</Button>
                    </FormItem>
                    <div>
                        <Button type="text" style="width: 100px;" @click="cancelEditUserInfor">取消</Button>
                    </div>
                </Form>
            </div>
        </Card>
        <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false>
            <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
            <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right"
                  :rules="passwordValidate" onsubmit="return false">
                <FormItem label="原密码" prop="oldPassword">
                    <Input v-model="editPasswordForm.oldPassword" placeholder="请输入现在使用的密码"/>
                </FormItem>
                <FormItem label="新密码" prop="password">
                    <Input v-model="editPasswordForm.password" placeholder="请输入新密码"/>
                </FormItem>
                <FormItem label="确认新密码" prop="rePassword">
                    <Input v-model="editPasswordForm.rePassword" placeholder="请再次输入新密码"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditPass">取消</Button>
                <Button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</Button>
            </div>
        </Modal>
        <Modal v-model="editCompanyModal" :closable='false' :mask-closable=false>
            <h3 slot="header" style="color:#2D8CF0">修改公司名称</h3>
            <Form ref="editPasswordForm" :model="editCompanyForm" :label-width="100" label-position="right" onsubmit="return false">
                <FormItem label="公司名称" prop="oldPassword">
                    <Input v-model="editCompanyForm.name" placeholder="请输入公司名称"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditCom">取消</Button>
                <Button type="primary" :loading="saveComLoading" @click="saveEditCom">保存</Button>
            </div>
        </Modal>
        <Modal v-model="passwordModel" :closable='false' :mask-closable=false>
            <h3 slot="header" style="color:#2D8CF0">忘记密码</h3>
            <Form ref="pForm" :model="userForm" :label-width="100" label-position="right" onsubmit="return false">
                <FormItem label="验证码" prop="code">
                    <Input v-model="userForm.code" placeholder="请输入验证码"/>
                </FormItem>
                <FormItem label="新密码" prop="password">
                    <Input v-model="userForm.password" placeholder="请输入新密码"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelPassword">取消</Button>
                <Button type="primary" :loading="passwordLoading" @click="savePassword">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import api from '../../api';
    import cookie from 'js-cookie';

    export default {
        name: 'own-space',
        data () {
            const valideRePassword = (rule, value, callback) => {
                if (value !== this.editPasswordForm.password) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                userForm: {},
                buttonSHow: false,
                save_loading: false,
                editPasswordModal: false, // 修改密码模态框显示
                savePassLoading: false,
                saveComLoading: false,
                editCompanyModal: false,
                passwordModel: false,
                passwordLoading: false,
                editPasswordForm: {
                    oldPassword: '',
                    password: '',
                    rePassword: ''
                },
                editCompanyForm: {
                    name: '',
                    sKey: 'COMPANY'
                },
                passwordValidate: {
                    oldPassword: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入新密码', trigger: 'blur'}
                    ],
                    rePassword: [
                        {required: true, message: '请再次输入新密码', trigger: 'blur'},
                        {validator: valideRePassword, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            showEditPassword () {
                this.editPasswordModal = true;
            },
            showEditCompany() {
                this.editCompanyModal = true;
            },
            showEPassword() {
                this.userForm.type = 1;
                this.userForm.password = '';
                api.getVerfiCode(this.userForm);
                this.passwordModel = true;
            },
            cancelEditUserInfor () {
                this.$store.commit('removeTag', 'ownspace_index');
                localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
                let lastPageName = '';
                if (this.$store.state.app.pageOpenedList.length > 1) {
                    lastPageName = this.$store.state.app.pageOpenedList[1].name;
                } else {
                    lastPageName = this.$store.state.app.pageOpenedList[0].name;
                }
                this.$router.push({
                    name: lastPageName
                });
            },
            cancelEditPass () {
                this.editPasswordModal = false;
            },
            cancelEditCom () {
                this.editCompanyModal = false;
            },
            cancelPassword () {
                this.passwordModel = false;
            },
            saveEditPass () {
                this.$refs['editPasswordForm'].validate((valid) => {
                    if (valid) {
                        this.savePassLoading = true;
                        this.editPasswordForm.id = cookie.get('userId');
                        api.systemUserUpdatePassword(this.editPasswordForm).then(data => {
                            this.savePassLoading = false;
                            if (data.code === 0) {
                                this.editPasswordModal = false;
                            }
                        });
                    }
                });
            },
            saveEditCom () {
                this.saveComLoading = true;
                api.settingUpdate(this.editCompanyForm).then(data => {
                    this.saveComLoading = false;
                    if (data.code === 0) {
                        cookie.set('companyName', this.editCompanyForm.name, {expires: 1});
                        this.editCompanyModal = false;
                        location.reload();
                    }
                });
            },
            savePassword () {
                this.passwordLoading = true;
                this.userForm.type = 1;
                api.verfiCode(this.userForm).then(data => {
                    this.passwordLoading = false;
                    if (data.code === 0) {
                        api.systemUserUpdate(this.userForm).then(data => {
                            if (data.code === 0) {
                                this.passwordModel = false;
                            }
                        });
                    }
                });
            }
        },
        mounted () {
            api.systemUserDetail({id: cookie.get('userId')}).then(data => {
                if (data.code === 0) {
                    this.userForm = data.data;
                    if (data.data.roleId === 1){
                        this.buttonSHow = true;
                    }
                }
            });
        }
    };
</script>
